<template>
  <view :class="['content', shopCar.length === 0 ? 'empty' : '']">
    <fui-icon v-if="shopCar.length === 0" size="250" name="cart"></fui-icon>
    <view v-if="shopCar.length === 0" class="tip">购物车为空</view>
    <foodVue v-for="item in shopCar" :key="item.id" :idx="item.id" :src="item.src" :title="item.title" :detail="item.detail" :singlePrice="item.singlePrice" />
  </view>
  <view class="pay" v-if="totalPrice > 0">
    <view class="totalPrice">￥{{ totalPrice }}</view>
    <fuiButton width="250rpx" radius="100rpx" background="#ff0000" color="#fff" @click="Nav.NavToPage('Tab3-Order')">下单</fuiButton>
  </view>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue";
import fuiButton from "@/components/firstui/fui-button/fui-button.vue";
import fuiList from "@/components/firstui/fui-list/fui-list.vue";
import fuiListCell from "@/components/firstui/fui-list-cell/fui-list-cell.vue";
import Nav from "@/router";
import { onShow, onHide } from "@dcloudio/uni-app";
import foodVue from "@/components/project/food/food.vue";
import Store from "@/store";
import Config from "@/config";
import Food from "@/entity/interface/food.interfac";
const shopCar = ref<Food[]>([]);
const totalPrice = ref(0);
onMounted(() => {
  shopCar.value = Store.Common.getShopCarList();
  totalPrice.value = Store.Common.getShopCarTotalPrice();
  uni.$on(Config.Event.setShopCar, () => {
    shopCar.value = Store.Common.getShopCarList();
    totalPrice.value = Store.Common.getShopCarTotalPrice();
  });
});
onUnmounted(() => {
  uni.$off(Config.Event.setShopCar);
});
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  width: 710rpx;
  min-height: calc(100vh - 120rpx);
  margin: 0 20rpx;
}
.empty {
  justify-content: center;
}

.totalPrice {
  width: 300rpx;
  height: 130rpx;
  margin: 0rpx;
  line-height: 130rpx;
  text-align: center;
  color: red;
  font-size: 50rpx;
  font-weight: bold;
}
.tip {
  font-size: 50rpx;
}
.pay {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  background-color: white;
  /* box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1) inset; */
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  width: 750rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 130rpx;
}
</style>
